window.onload = function () {
    $(function ($) {
        /*轮播图*/
        banner();

    })
};

var banner = function () {
    /* var render = function(){
           /!*获取轮播图的数据 ajax*!/
           $.ajax({
               type:"get",
               url:"js/data.json",
               dataType:"json",
               data:"",
               success:function (data) {
                   data = $(window).data;
                   //console.log(data);
                   /!*判断当前页面的宽度，看需要加载哪一张图片*!/
                   var isMobile = $(window).width() < 768 ? true : false;
                   //console.log(isMobile);
                   /!*使用引擎模板渲染数据*!/
                   var pointHtml = template('pointTemp',{list:data});
                   var imgHtml = template('imgTemp',{list:data,isMobile:isMobile});
                   /!*将数据呈现到界面上*!/
                   $('.carousel-indicators').html(pointHtml);
                   $('.carousel-inner').html(imgHtml);
               }
           })
       };
       render();*/
    /*测试功能*/
    /*$(window).on('resize',function () {
        render();由于这部分不断获取数据会影响服务器，需优化代码的来调整
    })*/


    /*优化方案
    *
    * 1.定义一个全局的变量来接收缓存的数据
    * 2.如果已经存在数据，直接渲染html(渲染HTML需要调用render方法）
    * 3.如果不存在数据，需通过ajax加载获取数据后渲染html（渲染HTML需要抽成一个方法来调用，而渲染HTML就需要用到缓存的数据才能渲染）
    *
    * */
    var getData = function (callback) {
        if(window.data){
            callback && callback(window.data);
        }else{
            /*获取轮播图的数据 ajax*/
            $.ajax({
                type:"get",
                url:"js/data.json",
                dataType:"json",
                data:"",
                success:function (data) {
                    window.data = data;//定义一个全局的变量来接收缓存的数据
                    console.log(data);
                    callback && callback(window.data);
                }
            });
        }
    };

    var render = function () {
        getData(function (data) {
            /*判断当前页面的宽度，看需要加载哪一张图片*/
            var isMobile = $(window).width() < 768 ? true : false;
            //console.log(isMobile);
            /*使用引擎模板渲染数据*/
            var pointHtml = template('pointTemp',{list:data});
            var imgHtml = template('imgTemp',{list:data,isMobile:isMobile});
            /*将数据呈现到界面上*/
            $('.carousel-indicators').html(pointHtml);
            $('.carousel-inner').html(imgHtml);
        });
    }

    $(window).on('resize',function () {
        render();
        /*通过js主动触发某个事件*/
    }).trigger('resize');

    /*手势切换*/

        var startX = 0;
        var distanceX = 0;
        var isMove = false;
        $('.banner').on('touchstart',function (e) {
            //console.log(e);originalEvent——>touches
            startX = e.originalEvent.touches[0].clientX;
        }).on('touchmove',function (e) {
            var moveX = e.originalEvent.touches[0].clientX;
            distanceX = moveX - startX;
            isMove = true;
        }).on('touchend',function (e) {
            /*判断是否有移动并且移动距离书否超过50px*/
            if(isMove && Math.abs(distanceX) > 50){
                /*触发下一张*/
                if(distanceX < 0){
                    console.log('next');
                    $('.carousel').carousel('next');
                }else{
                    /*触发上一张*/
                    console.log('prev');
                    $('.carousel').carousel('prev');
                }
                startX = 0;
                distanceX = 0;
                isMove = false;
            }
        });

    /*移动端页签能实现滑动效果*/
    /*1. 获取所有li的宽度，将宽度给ul*/
    var $nav_tabs = $('.wjs_product .nav-tabs');
    var width = 0;
    /*遍历获取所有li的宽度*/
    $nav_tabs.find('li').each(function (i,item) {
        var $currLi = $(this);
        var currWidth = $currLi.outerWidth(true);
        //console.log(currWidth);
        width += currWidth;
    });
    console.log(width);
    $nav_tabs.width(width);

    /*2. 超出隐藏css*/

    /*3. 实现滑动效果*/
    new IScroll($('.nav-tabs_parents')[0],{
        scrollX:true,
        scrollY:false,
    });

};